<template>
    <div class="search_cp">
        <Data_show_mode_cp
            :data_list="data_list">
            <template #left>
                <span>
                    {{$store.state.search_data}}
                </span>
                关键字搜索结果展示
            </template>
        </Data_show_mode_cp>
    </div>
</template>

<script>
import Data_show_mode_cp from '@/components/public_cp/data_show_mode'
export default {  //搜索结果列表显示组件（组件内请求数据）
    name: 'Search_cp',
    components:{Data_show_mode_cp},
    data(){
        return{
            data_list:[],
        };
    },
    watch:{
        '$store.state.search_data':{ //当全局的search_data发生变化时请求搜索的数据
            handler(){
                if(this.$store.state.search_data){
                    this.on_search(this.$store.state.search_data);
                }
            },
            immediate:true,
        },
    },
    created(){
    },
    methods:{
        on_search(search_data){ //从服务端请求数据
            if(search_data){
                this.$store.commit('set_loading',{
                    state:true,
                });
                this.$axios.json_post('/file/findList',{
                    fileTag:search_data,
                }).then(({data})=>{
                    this.data_list = data;
                }).finally(()=>{
                    this.$store.commit('set_loading',{
                        state:false,
                    });
                }).catch((msg)=>{
                    this.data_list = [];
                    this.$message(msg);
                });
            }
        },
    },
}
</script>

<style scoped lang='scss'>
.search_cp{
    width: 100%;
    padding: 0 25px;
    box-sizing: border-box;
    span{
        color: #2980ff;
        font-size: 25px;
    }
}
</style>
